<script>
import { onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
export default {
  setup() {
    //引入跳转router
    const router = useRouter();
    //获取接口数据
    onMounted(() => {
      list.search_list = JSON.parse(window.localStorage.getItem("search_list"))
        ? JSON.parse(window.localStorage.getItem("search_list"))
        : [];
      document
        .querySelector("body")
        .setAttribute("style", "background-color:#f9f8fd;");
    });
    //设置响应式数据
    const list = reactive({
      search_list: [],
      search_value: "",
      search_item: [],
      search_item_show: false,
      clear_show: false,
    });
    //获取localstorage里面的数据
    const sum_data = window.localStorage.getItem("sum_data")
      ? JSON.parse(window.localStorage.getItem("sum_data"))
      : [];
    console.log(sum_data);
    //过滤获取数据
    let footballlist = sum_data.filter((item) => {
      return item.sportName == "篮球";
    });
    //对数据热度进行计算调整
    function filters(id) {
      let w = id > 10000 ? (id / 10000).toFixed(1) + "万" : id;
      return w;
    }
    //添加搜索历史和搜索
    let add_search = () => {
      if (list.search_value != "") {
        list.search_list.unshift(list.search_value);
        //数组去重
        list.search_list = [...new Set(list.search_list)];
        //进行搜索
        list.search_item = sum_data.filter((item) => {
          //判读搜索内容是否为数字
          if (parseInt(list.search_value)) {
            // console.log(parseInt(list.search_value));
            return item.roomId.includes(parseInt(list.search_value));
          } else {
            //判读搜索内容是否为字符串
            return (
              item.anchorName.includes(list.search_value) ||
              item.roomName.includes(list.search_value)
            );
          }
        });
        //热门直播的显示与隐藏
        list.search_item.length >= 1
          ? (list.search_item_show = false)
          : (list.search_item_show = true);
        // console.log(list.search_item);
      }
      //搜索数组长度设置最大为4
      if (list.search_list.length > 4) {
        list.search_list.splice(list.search_list.length - 1, 1);
      }
      window.localStorage.setItem(
        "search_list",
        JSON.stringify(list.search_list)
      );

      list.search_value = "";
    };

    // 清空搜索历史
    let delHistory = () => {
      window.localStorage.removeItem("search_list");
      list.search_list = [];
      list.search_item = [];
      list.search_item_show = false;
    };
    //清空搜索value
    let clear_value = () => {
      list.search_value = "";
    };
    //点击搜索历史
    let getItem = (data) => {
      console.log(data);
      list.search_item = sum_data.filter((item) => {
        if (parseInt(data)) {
          // console.log(parseInt(list.search_value));
          return item.roomId.includes(parseInt(data));
        } else {
          return item.anchorName.includes(data) || item.roomName.includes(data);
        }
      });
      console.log(list.search_item);
      list.search_item.length >= 1
        ? (list.search_item_show = false)
        : (list.search_item_show = true);
    };
    //路由跳转
    let getJump = (id) => {
      console.log(id);
      router.push({
        path: "/detailslive",
        query: {
          id,
        },
      });
    };
    return {
      sum_data,
      footballlist,
      filters,
      ...toRefs(list),
      add_search,
      delHistory,
      clear_value,
      getItem,
      getJump,
    };
  },
};
</script>

<template>
  <div class="container search">
    <!-- 导航栏 -->
    <div class="nav">
      <div class="nav-head bg">
        <div class="left">
          <a href="javascript:;" class="searchs">
            <i class="icon-sousuo iconfont"></i>
            <input
              type="text"
              class="inputs"
              placeholder="搜索主播名、主播ID、主播间名"
              v-model="search_value"
              @keydown.enter="add_search"
            />
            <i
              class="icon-guanbi iconfont"
              v-show="search_value != ''"
              @click="clear_value"
            ></i>
          </a>
        </div>
        <div class="right">
          <a href="javascript:;" @click="$router.go(-1)" class="btn"> 取消 </a>
        </div>
      </div>

      <!-- 搜索历史 -->
      <div class="history">
        <div class="title">
          <h4>搜索历史</h4>
          <i class="iconfont icon-icon" @click="delHistory"></i>
        </div>
        <ul>
          <li
            v-for="(item, index) in search_list"
            :key="index"
            @click="getItem(item)"
          >
            {{ item }}
          </li>
        </ul>
        <van-empty
          class="custom-image"
          image="../assets/img/null2.png"
          description="还没有浏览记录哦"
          v-show="search_list.length < 1"
        />
      </div>
    </div>

    <!-- 相关主播 -->
    <h3 v-show="search_item.length >= 1">相关主播</h3>
    <div class="host" v-show="search_item.length >= 1">
      <div
        class="item"
        v-for="(item, index) in search_item"
        :key="item.id"
        @click="getJump(index)"
      >
        <div class="img">
          <img :src="item.anchorAvatar" alt="" />
        </div>
        <div class="info">
          <div class="name">{{ item.anchorName }}</div>
          <div class="text">{{ item.roomName }}</div>
        </div>
        <div class="live">
          <img src="../assets/img/live.gif" alt="" /><span>直播间</span>
        </div>
      </div>
    </div>

    <!-- 搜索结果 -->
    <h3 v-show="search_item.length >= 1">搜索结果</h3>
    <div class="type" v-show="search_item.length >= 1">
      <ul>
        <li
          v-for="(item, index) in search_item"
          :key="item.matchId"
          @click="getJump(index)"
        >
          <div class="img">
            <img :src="item.matchCutImg" alt="" />
            <div class="living">
              <img src="../assets/img/live.gif" alt="" /><span>直播中</span>
            </div>
            <div class="text">
              <div class="left one-txt-cut">{{ item.anchorName }}</div>
              <div class="right">
                <i class="iconfont icon-huo"></i
                ><span>{{ filters(item.hotNum) }}</span>
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="title one-txt-cut">{{ item.roomName }}</div>
            <div class="label">{{ item.sportName }}</div>
          </div>
        </li>
      </ul>
    </div>

    <van-empty
      class="custom-image"
      image="../assets/img/null2.png"
      description="搜索不存在"
      v-show="search_item_show"
    />

    <!-- 正在热播 -->
    <h3 v-show="search_item.length < 1">正在热播</h3>
    <div class="type" v-show="search_item.length < 1">
      <ul v-show="footballlist">
        <li
          v-for="(item, index) in footballlist"
          :key="item.matchId"
          @click="getJump(index)"
        >
          <div class="img">
            <img :src="item.matchCutImg" alt="" />
            <div class="living">
              <img src="../assets/img/live.gif" alt="" /><span>直播中</span>
            </div>
            <div class="text">
              <div class="left one-txt-cut">{{ item.anchorName }}</div>
              <div class="right">
                <i class="iconfont icon-huo"></i
                ><span>{{ filters(item.hotNum) }}</span>
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="title one-txt-cut">{{ item.roomName }}</div>
            <div class="label">{{ item.sportName }}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.bg {
  background-size: 100%;
  background-image: url(../assets/img/topNav.png);
}

.search {
  background-color: #f9f8fd;
  .nav {
    .inputs {
      width: 303px;
      height: 30px;
      padding-left: 33px;
      padding-right: 23px;
      font-size: 12.5px;
      background: #fff;
      border-radius: 18px;
      display: block;
      color: #b2b2b2;
      line-height: 30px;
      border: none;
      outline: none;
    }
    ::-webkit-input-placeholder {
      color: #b2b2b2;
    }
    .nav-head {
      // background: linear-gradient(270deg, #660234 0%, #7b0b3b 100%);
      font-size: 20px;
      margin-bottom: 13px;
      //   margin-top: 10px;
      padding: 0 15px;
      height: 49px;
      line-height: 49px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .iconfont {
        font-size: 22px;
      }
      .left {
        display: flex;
      }
      .right {
        .btn {
          font-size: 14px;
          //   font-weight: bold;
          color: #fff;
        }
      }
      .searchs {
        height: 49px;
        line-height: 49px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 14px;
        position: relative;
        .icon-sousuo {
          position: absolute;
          top: 0;
          left: 10px;
          font-size: 16px;
          color: #909090;
        }
        .icon-guanbi {
          position: absolute;
          top: 0;
          right: 10px;
          font-size: 16px;
          color: #909090;
        }
      }
    }
    .history {
      padding: 0 15px;
      .title {
        display: flex;
        justify-content: space-between;
        h4 {
          font-weight: 600;
          font-family: 黑体;
        }
        .iconfont {
          font-size: 20px;
        }
      }

      ul {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        li {
          height: 25px;
          text-align: center;
          line-height: 25px;
          margin: 0 8px 10px 0;
          background: #ededed;
          color: #909399;
          border-radius: 5px;
          list-style: none;
          font-size: 13px;
          padding: 0 6px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .hot {
    padding: 0px 12px;
    h3 {
      font-size: 16px;
      font-weight: 600;
      font-family: 黑体;
      margin: 20px 0 10px;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 49%;
        background-color: #fff;
        border-radius: 8px;
        margin-bottom: 10px;
        .img {
          position: relative;
          // width: 100%;
          img {
            width: 100%;
            height: 98px;
            border-radius: 8px 8px 0 0;
          }
          .living {
            position: absolute;
            top: 10px;
            right: 8px;
            width: 48px;
            height: 16px;
            background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
            border-radius: 8px;
            padding-right: 2px;
            vertical-align: middle;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            img {
              width: 8px;
              height: 8px;
              margin-left: 8px;
            }
            span {
              flex: 1;
              transform: scale(0.73, 0.73);
              opacity: 0.8;
              white-space: nowrap;
            }
          }
          .text {
            position: absolute;
            display: flex;
            width: 100%;
            font-size: 12px;
            padding: 5px 10px;
            margin-top: -26px;
            color: white;
            font-weight: 700;
            background: linear-gradient(
              180deg,
              rgba(0, 0, 0, 0) 0,
              rgba(0, 0, 0, 0.8) 100%
            );
            .left {
              flex: 1;
            }
            .right {
              .iconfont {
                font-weight: normal;
                margin-right: 1px;
              }
            }
          }
        }
        .bottom {
          height: 40px;
          display: flex;
          align-items: center;
          .title {
            flex: 1;
            color: #1e1e1e;
            font-size: 13px;
            transform: scale(0.85, 0.85);
          }
          .label {
            color: #d51c78;
            font-size: 14px;
            transform: scale(0.83, 0.83);
            width: 40px;
            height: 24px;
            line-height: 24px;
            border-radius: 6px 3px 5px 6px;
            background-color: #ffd3df;
            text-align: center;
            margin-right: 8px;
          }
        }
      }
    }
  }
  .host {
    padding: 0px 10px;
    h3 {
      font-size: 16px;
      font-weight: 600;
      font-family: 黑体;
      margin: 20px 0 10px;
    }
    .item {
      height: 65px;
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 0 8px;
      margin-top: 10px;
      border-radius: 8px;
      .img {
        width: 45px;
        height: 45px;
        margin-right: 8px;
        img {
          width: 100%;
          border-radius: 50%;
        }
      }
      .info {
        flex: 1;
        .name {
          color: #1e1e1e;
          font-size: 14px;
          font-weight: 600;
          font-family: 黑体;
          margin-top: 4px;
        }
        .text {
          font-size: 12px;
          color: #787a82;
          margin-top: 4px;
        }
      }
      .live {
        display: flex;
        align-items: center;
        justify-content: space-around;
        background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
        height: 22px;
        width: 67px;
        border-radius: 11px;
        margin-right: 5px;
        padding: 0px 5px 0 0;
        img {
          width: 12px;
          margin-left: 8px;
          // margin-right: 3px;
        }
        span {
          color: #ffffff;
          text-align: center;
          font-size: 12px;
          transform: scale(0.83, 0.83);
          line-height: 21px;
          padding-top: 1px;
        }
      }
    }
  }
  .live {
    padding: 0px 12px;
    h3 {
      font-size: 16px;
      font-weight: 600;
      font-family: 黑体;
      margin: 20px 0 10px;
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 49%;
        background-color: #fff;
        border-radius: 8px;
        margin-bottom: 10px;
        .img {
          position: relative;
          // width: 100%;
          img {
            width: 100%;
            height: 98px;
            border-radius: 8px 8px 0 0;
          }
          .living {
            position: absolute;
            top: 10px;
            right: 8px;
            width: 48px;
            height: 16px;
            background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
            border-radius: 8px;
            padding-right: 2px;
            vertical-align: middle;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            img {
              width: 8px;
              height: 8px;
              margin-left: 8px;
            }
            span {
              flex: 1;
              transform: scale(0.73, 0.73);
              opacity: 0.8;
              white-space: nowrap;
            }
          }
          .text {
            position: absolute;
            display: flex;
            width: 100%;
            font-size: 12px;
            padding: 5px 10px;
            margin-top: -26px;
            color: white;
            font-weight: 700;
            background: linear-gradient(
              180deg,
              rgba(0, 0, 0, 0) 0,
              rgba(0, 0, 0, 0.8) 100%
            );
            .left {
              flex: 1;
            }
            .right {
              .iconfont {
                font-weight: normal;
                margin-right: 1px;
              }
            }
          }
        }
        .bottom {
          height: 40px;
          display: flex;
          align-items: center;
          .title {
            flex: 1;
            color: #1e1e1e;
            font-size: 13px;
            transform: scale(0.85, 0.85);
          }
          .label {
            color: #d51c78;
            font-size: 14px;
            transform: scale(0.83, 0.83);
            width: 40px;
            height: 24px;
            line-height: 24px;
            border-radius: 6px 3px 5px 6px;
            background-color: #ffd3df;
            text-align: center;
            margin-right: 8px;
          }
        }
      }
    }
  }
}

::v-deep .van-empty {
  background-color: #f9f8fd;
}

.type {
  padding: 10px 10px 0px;
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 49%;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 10px;
      .img {
        position: relative;
        // width: 100%;
        img {
          width: 100%;
          height: 98px;
          border-radius: 8px 8px 0 0;
        }
        .living {
          position: absolute;
          top: 10px;
          right: 8px;
          width: 48px;
          height: 16px;
          background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
          border-radius: 8px;
          padding-right: 2px;
          vertical-align: middle;
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          img {
            width: 8px;
            height: 8px;
            margin-left: 8px;
          }
          span {
            flex: 1;
            transform: scale(0.73, 0.73);
            opacity: 0.8;
            white-space: nowrap;
          }
        }
        .text {
          position: absolute;
          display: flex;
          width: 100%;
          font-size: 12px;
          padding: 5px 10px;
          margin-top: -26px;
          color: white;
          font-weight: 700;
          background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 0.8) 100%
          );
          .left {
            flex: 1;
          }
          .right {
            .iconfont {
              font-weight: normal;
              margin-right: 1px;
            }
          }
        }
      }
      .bottom {
        height: 40px;
        display: flex;
        align-items: center;
        .title {
          flex: 1;
          color: #1e1e1e;
          font-size: 13px;
          transform: scale(0.85, 0.85);
        }
        .label {
          color: #d51c78;
          font-size: 14px;
          transform: scale(0.83, 0.83);
          width: 40px;
          height: 24px;
          line-height: 24px;
          border-radius: 6px 3px 5px 6px;
          background-color: #ffd3df;
          text-align: center;
          margin-right: 8px;
        }
      }
    }
  }
}
h3 {
  padding: 5px 15px;
  font-weight: 600;
  font-family: 黑体;
  font-size: 16px;
}

// html, body {
//   background-color: #f9f8fd;
// }
</style>
